<template>
    <div>
        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 90px;width: 100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <div class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>员工管理</el-breadcrumb-item>
                    <el-breadcrumb-item>员工列表</el-breadcrumb-item>
                </div>
            </el-breadcrumb>
        </div>
        <div class="selectdiv" style="margin-bottom: 25px;">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input v-model="queryInfo.id" placeholder="输入用户编号" clearable @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search" @click="getUserById"></el-button></el-input>
                </el-col>
                <el-button type="primary" @click="dialogCreate = true">新建</el-button>
            </el-row>
        </div>
        <div>
            <el-card>
            <el-table
                    :data="userlist"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="用户编号"
                        min-width="10%">
                </el-table-column>
                <el-table-column
                        prop="idNum"
                        label="身份证号"
                        min-width="15%">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        min-width="10%">
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄"
                        min-width="10%">
                </el-table-column>
                <el-table-column
                        prop="tel"
                        label="电话"
                        min-width="15%">
                </el-table-column>
                <el-table-column
                        prop="position"
                        label="职位"
                        min-width="15%">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                        min-width="30%">
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin-top: 15px; display: flex;justify-content:flex-end;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
            </el-card>
        </div>

        <!--修改用户对话框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogEdit"
                width="50%"
                :before-close="handleClose">
            <el-form :inline="true" :model="editUserForm" ref="editUserRef" :label-position="labelPosition" label-width="100px">
            <el-form-item label="家庭住址" prop="address">
                <el-input v-model="editUserForm.address" placeholder="输入家庭住址" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="业主年龄" prop="age">
                <el-input v-model="editUserForm.age" placeholder="输入业主年龄" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idNum">
                <el-input v-model="editUserForm.idNum" placeholder="输入身份证号" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="tel">
                <el-input v-model="editUserForm.tel" placeholder="输入电话号码" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="业主姓名" prop="userName">
                <el-input v-model="editUserForm.name" placeholder="输入业主姓名" style="width: 400px;"></el-input>
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogEdit = false">取 消</el-button>
            <el-button type="primary" @click="editUser">确 定</el-button>
            </span>
        </el-dialog>
        <!--添加用户对话框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogCreate"
                width="50%"
                @close="addClose">
            <el-form :inline="true" :model="addUserForm" ref="addUserRef" :label-position="labelPosition" label-width="100px">
                <el-form-item label="家庭住址" prop="address">
                    <el-input v-model="addUserForm.address" placeholder="输入家庭住址" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="业主年龄" prop="age">
                    <el-input v-model="addUserForm.age" placeholder="输入业主年龄" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="idNum">
                    <el-input v-model="addUserForm.idNum" placeholder="输入身份证号" style="width: 400px;"></el-input>
                </el-form-item>
                <div>
                    <el-form-item label="个人密码" prop="password">
                        <el-input v-model="addUserForm.password" placeholder="请输入密码" style="width: 168px;"></el-input>
                    </el-form-item>
                </div>
                <el-form-item label="电话号码" prop="tel">
                    <el-input v-model="addUserForm.tel" placeholder="输入电话号码" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="业主姓名" prop="userName">
                    <el-input v-model="addUserForm.userName" placeholder="输入业主姓名" style="width: 400px;"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogCreate = false">取 消</el-button>
            <el-button type="primary" @click="addUser">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        created() {
            this.getUserList()
        },
        methods: {
            handleSizeChange (newSize) {
                // console.log(newSize)
                this.queryInfo.pagesize = newSize
                this.getUserList()
            },
            handleCurrentChange (newSize) {
                // console.log(newSize)
                this.queryInfo.pagenum = newSize
                this.getUserList()
            },
            //根据userId删除用户
            async deleteUserById(id){
                //弹框询问是否删除数据
               const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',

                }).catch( err => err)
                console.log(confirmResult)
                if(confirmResult !== 'confirm') {return this.$message.info('取消删除用户')}
                const {data : resp} = await this.$http.delete('/sysUsers/deleteById/'+id)
                  if(resp.code !== 200) {return this.$message.error('删除用户失败') }
                  this.$message.success('删除用户成功')
                   this.getUserList()
            },
            //显示修改用户对话框
            async showEdit(id){
                const {data : resp} = await this.$http.get('sysUsers/getUsrById/'+id)
                if (resp.code !== 200) {
                    return this.$message.error('查询用户信息失败！')
                }
                this.editUserForm = resp.data
                this.dialogEdit = true
            },

            //修改用户并提交
            editUser(){
                this.$refs.editUserRef.validate(async valid => {
                    if(!valid) return
                    const {data: res} = await this.$http.put(
                        'sysUsers/updateById' ,
                        {
                            userId: this.editUserForm.id,
                            address: this.editUserForm.address,
                            age: this.editUserForm.age,
                            idNum: this.editUserForm.idNum,
                            tel: this.editUserForm.tel,
                            userName: this.editUserForm.name,
                        }
                    )
                    console.log(res.code)
                    if (res.code !== 200) {
                        return this.$message.error('更新用户信息失败！')
                    }
                    // 隐藏添加用户对话框
                    this.dialogEdit = false
                    this.$message.success('更新用户信息成功！')
                    this.getUserList()
                })
            },
            onSubmit() {
                console.log('submit!');
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //添加用户对话框关闭后清除数据
            addClose(){
                this.$refs.addUserRef.resetFields()
            },
            //获取用户列表
            async getUserList(){
               const {data : resp}=await this.$http.get('/sysUsers/findAllEmployee/'+ this.queryInfo.pagenum + '/' + this.queryInfo.pagesize)
               if(resp.code !== 200) {return this.$message.error('获取用户用户列表失败') }
                /*this.$message.success('')*/
                this.userlist = resp.data.records
                this.total = resp.data.total
            },
            //添加用户
            addUser(){
                this.$refs.addUserRef.validate(async valid => {
                    const {data: resp} = await this.$http.post('/sysUsers/addEmployee', this.addUserForm)
                    if (resp.code !== 200) {
                        return this.$message.error('添加用户失败！')
                    }
                    this.$message.success('添加用户成功！')
                    this.dialogCreate = false
                    this.getUserList()
                })
            },
            //通过id查找用户
            async getUserById(){
                const {data: resp} = await this.$http.get('sysUsers/getUsrById/' + this.queryInfo.id)
                if (resp.code !== 200) {
                    return this.$message.error('获取用户列表失败！')
                }
                this.userlist= [resp.data]
                console.log(this.userlist)
            },
        },

        data() {
            return {
                queryInfo: {
                    id:'',
                    // 当前页数
                    pagenum: 1,
                    // 每页显示多少数据
                    pagesize: 5
                },
                addUserForm:{
                    id:'',
                    address:'',
                    age:'',
                    name:'',
                    tel:'',
                    password:'',
                    idNum:''
                },
                labelPosition:'right',
                userlist: [{}],
                total: 0,
                //查询到的用户信息
                editdata:{
                },
                addUserRules:{
                    address: [
                        {required: true, message: '请输入身份证号', trigger: 'blur'},
                        {min: 1, max: 18, message: '长度为2 个字符', trigger: 'blur'}
                    ],
                    age: [
                        {required: true, message: '请输入业主名字', trigger: 'blur'},
                        {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
                    ],
                    userName: [
                        {required: true, message: '请输入业主年龄', trigger: 'blur'},
                        {min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur'}
                    ],
                    tel: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 1, max: 11, message: '长度为11个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入房子编号', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1到 11个字符', trigger: 'blur'}
                    ],
                    idNum: [
                        {required: true, message: '请输入房子编号', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 11 个字符', trigger: 'blur'}
                    ],
                },
                editUserForm:{},
                dialogEdit: false,
                dialogCreate:false,
            }
        },
    }
</script>

<style scoped>
    .selectdiv {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .breadcrumb {
        margin-top: 29px;
        margin-left: 20px;
        font-size: 25px
    }

</style>

